
<template>
  <div class="screen-content">
    <header class="header">
      <div class="header-group">
        <div class="header-text">云诊断数据看板</div>
      </div>
      <div class="header-left"></div>
      <div class="header-right">
        <div class="header-text-top1 header-text">2020年8月23日</div>
        <div class="header-text-bottom1 header-text">
          <span>星期二</span><span>晴</span>
        </div>
      </div>
    </header>
    <div class="screen-article">
      <div class="article-center">
        <div class="article-center-content">
          <div class="number-center" id="eachart6"></div>
          <div class="number-left">
            <div class="number-box">
              <div class="left-top">45</div>
              <div class="left-bottom">胶片量</div>
            </div>
            <div class="number-box" style="margin-top: 16px">
              <div class="left-top">45</div>
              <div class="left-bottom">报告量</div>
            </div>
            <div class="number-box">
              <div class="left-top">45</div>
              <div class="left-bottom">dicome量</div>
            </div>
            <div class="number-box" style="margin-top: 16px">
              <div class="left-top">45</div>
              <div class="left-bottom">检查人数</div>
            </div>
          </div>
          <div class="number-right">
            <div class="number-box">
              <div class="left-top">45<span>GB</span></div>
              <div class="left-bottom">总容量</div>
            </div>
            <div class="number-box" style="margin-top: 16px">
              <div class="left-top">45<span>GB</span></div>
              <div class="left-bottom">总容量</div>
            </div>
            <div class="number-box">
              <div class="left-top">45<span>GB</span></div>
              <div class="left-bottom">dicome量</div>
            </div>
            <div class="number-box" style="margin-top: 16px">
              <div class="left-top">45<span>GB</span></div>
              <div class="left-bottom">检查人数</div>
            </div>
          </div>
        </div>
      </div>
      <div class="article-right">
        <div class="article-right-top">
          <div class="train">
            <div class="title"><span>医院诊断数量</span></div>
            <div class="eachart-group" id="eachart1"></div>
          </div>
          <div class="qualified">
            <div class="title"><span>医院诊断数量</span></div>
            <div class="eachart-group" id="eachart2"></div>
          </div>
        </div>
        <div class="unit">
          <div class="title"><span>医院诊断数量</span></div>
          <div class="eachart-group" id="eachart3"></div>
        </div>
      </div>
    </div>
    <div class="screen-bottom">
      <div class="achievement">
        <div class="title"><span>医院诊断数量</span></div>
        <div class="eachart-group" id="eachart4"></div>
      </div>
      <div class="moment">
        <div class="title"><span>医院诊断数量</span></div>
        <div class="eachart-group" id="eachart5"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import * as echarts from "echarts";
import axios from 'axios';
export default {
  name: "cloudShadow",
  computed: {
    ...mapState({
      rbacAuth: (state) => state.app.rcba,
    }),
  },
  data() {
    return {
      treeData: [],
      dialog: false,
      disabled: false,
      query: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [],
      pageTotal: 0,
      multipleSelection: [],
      ruleForm: {
        title: "",
        mark: "",
        sort: "",
        status: false,
      },
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      dialogTitle: "新增",
      id: null,
      dataList: [
                { name: "南海诸岛",  value: 100,  eventTotal:100,  specialImportant:10,  import:10,  compare:10, common:40,  specail:20 },
                { name: "北京", value: 540 },
                { name: "天津", value: 130 },
                { name: "上海", value: 400},
                { name: "重庆",  value: 750},
                { name: "河北", value: 130},
                { name: "河南", value: 830},
                { name: "云南", value: 110 },
                { name: "辽宁",  value: 19 },
                { name: "黑龙江",  value: 150},
                { name: "湖南", value: 690 },
                { name: "安徽", value: 60 },
                { name: "山东", value: 39 },
                { name: "新疆", value: 452 },
                { name: "江苏", value: 31 },
                { name: "浙江", value: 104 },
                { name: "江西", value: 36 },
                { name: "湖北", value: 52},
                { name: "广西", value: 33 },
                { name: "甘肃", value: 73 },
                { name: "山西", value: 54 },
                { name: "内蒙古", value: 778},
                { name: "陕西", value: 22},
                { name: "吉林",value: 44 },
                { name: "福建",value: 18},
                { name: "贵州", value: 54},
                { name: "广东", value: 98},
                { name: "青海",value: 13},
                { name: "西藏", value: 0},
                { name: "四川", value: 44},
                { name: "宁夏", value: 42},
                { name: "海南", value: 22 },
                { name: "台湾", value: 23},
                { name: "香港",value: 25},
                { name: "澳门",value: 555}
            ]
    };
  },
  mounted() {
    // this.initAjaxMethod();
    this.eacharts1();
    this.eacharts2();
    this.eacharts3();
    this.eacharts4();
    this.eacharts5();
    this.eacharts6();
  },
  methods: {
    //列表加载
    initAjaxMethod() {
      this.$http
        .post(this.$API.DISEASE_DEPARTMENT_INDEX, {
          pageIndex: this.query.pageIndex,
          pageSize: this.query.pageSize,
          title: this.query.keyword,
        })
        .then((res) => {
          console.log("媒资列表", res);
          if (res.code == 1) {
            this.tableData = Array.isArray(res.data.list) ? res.data.list : [];
            this.pageTotal = res.data.total;
          }
        });
    },
    eacharts1() {
      let myChart = echarts.init(document.getElementById("eachart1"));
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    eacharts2() {
      let myChart = echarts.init(document.getElementById("eachart2"));
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    eacharts3() {
      let myChart = echarts.init(document.getElementById("eachart3"));
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    eacharts4() {
      let myChart = echarts.init(document.getElementById("eachart4"));
      let option = {
        title: {
          text: "Stacked Line",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "Direct",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      myChart.setOption(option);
    },
    eacharts5() {
        let myChart = echarts.init(document.getElementById("eachart5"));
      let option = {
        title: {
          text: "Stacked Line",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "Direct",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      myChart.setOption(option);
    },
    eacharts6(){
        axios.get('/china.json').then(res=>{
            if(res.status === 200 && Array.isArray(res.data.features)){
                let myChart = echarts.init(document.getElementById("eachart6"), null, {renderer:'svg'});
        echarts.registerMap('china', res.data) //这个特别重要
            myChart.off('click');
            //echart 配制option  
            var options= {
                    tooltip: {
                        triggerOn: "mousemove",   //mousemove、click
                        padding:8,
                        borderWidth:1,
                        borderColor:'#409eff',
                        backgroundColor:'rgba(255,255,255,0.7)',
                        textStyle:{
                            color:'#000000',
                            fontSize:13
                        },
                        formatter: function(e, t, n) {
                            let data = e.data;
                            let context = `
                            <div>
                                <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
                                <p class="tooltip_style"><span class="tooltip_left">成果总数</span><span class="tooltip_right">${data.value}</span></p>
                            </div>
                            `
                            return context;
                        }
                    },
                    visualMap: {
                        show:true,
                        left: 26,
                        bottom: 40,
                        showLabel:true,
                        pieces: [
                            {
                                gte: 1000,
                                label: ">= 1000",
                                color: "#5475f5"
                            },
                            {
                                gte: 700,
                                lt: 999,
                                label: "700 - 999",
                                color: "#e6ac53"
                            },
                            {
                                gte: 500,
                                lt: 699,
                                label: "500 - 699",
                                color: "#9feaa5"
                            },
                            {
                                gte: 100,
                                lt:499,
                                label: "100 - 499",
                                color: "#85daef"
                            },
                            {
                                gte: 10,
                                lt: 99,
                                label: "10 - 99",
                                color: "#74e2ca"
                            },
                            {
                                lt:10,
                                label:'<10',
                                color: "#9fb5ea"
                            }
                        ]
                    },
                    geo: {
                        map: "china",
                        scaleLimit: {
                            min: 1,
                            max: 2
                        },
                        zoom: 1,
                        top: 120,
                        layoutSize: "100%", //保持地图宽高比
                        label: {
                            normal: {
                                show:true,
                                fontSize: "14",
                                color: "rgba(0,0,0,0.7)"
                            },
                            emphasis: {
								show: false,
								textStyle: {
									color: "#F3F3F3"
								}
							}
                        },
                        itemStyle: {
                            normal: {
                                //shadowBlur: 50,
                                //shadowColor: 'rgba(0, 0, 0, 0.2)',
                                borderColor: "rgba(0, 0, 0, 0.2)",
                                areaColor: '#1955a4',
                            },
                            emphasis: {
                                areaColor: "#f2d5ad",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                borderWidth: 0
                            }
                        }
                    },
                    series: [
                        {
                            name: "成果预览",
                            type: "map",
                            geoIndex: 0,
                            data: this.dataList
                        }
                    ]
            }
            myChart.clear();
            myChart.setOption(options);
            myChart.resize();
            //地图的点击事件 ，钻取到市我就不举例了，类似的方法，点击事件可以获取到当前点击的省份的数		   据；
            myChart.on('click', function(params) {
                console.log(params)
            })
            }
        })
        
    }
  },
};
</script>

<style scoped lang='less'>
.screen-content {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/screen/bg.png") center no-repeat;
  background-size: 100% 100%;
  position: relative;
  .header {
    width: 100%;
    height: 0.0925vh * 158;
    background: url("../../assets/img/screen/header.png") center no-repeat;
    background-size: 100% 100%;
    .header-group {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 16px;
    }
    .header-icon {
      height: 0.0925vh * 47;
      width: auto;
    }
    .header-text {
      padding-left: 10px;
      font-size: 0.0925vh * 47;
      font-weight: 600;
      color: #ffffff;
      white-space: nowrap;
    }
    .header-left,
    .header-right {
      position: absolute;
      width: 0.052vw * 298;
      height: 0.0925vh * 58;
      top: 0.0925vh * 72;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 4px 0 2px 0;
    }
    .header-left {
      background: url("../../assets/img/screen/screen_logo.png") left center
        no-repeat;
      background-size: auto 100%;
      left: 30px;
    }
    .header-right {
      background: url("../../assets/img/screen/header_right.png") center
        no-repeat;
      background-size: 100% 100%;
      right: 30px;
    }
    .header-text {
      font-weight: bold;
      color: #00fff4;
    }
    .header-text-top {
      font-size: 14px;
      padding-left: 24px;
      line-height: 20px;
    }
    .header-text-bottom {
      font-size: 12px;
      padding-right: 15px;
      text-align: right;
      line-height: 14px;
    }
    .header-text-top1 {
      font-size: 14px;
      padding-right: 0.052vw * 51;
      text-align: right;
      line-height: 20px;
    }
    .header-text-bottom1 {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      margin-left: 21px;
      width: 0.052vw * 87;
      line-height: 14px;
    }
  }
  .title {
    display: flex;
    align-items: center;
    line-height: 24px;
    padding-left: 10px;
    span:nth-child(1) {
      font-size: 16px;
      font-weight: bold;
      color: #00fff4;
    }
    span:nth-child(2) {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      padding-left: 10px;
    }
  }
  .screen-article {
    padding: 0 0.052vw * 30;
    display: flex;
    height: 0.0925vh * 600;
    .article-center {
      flex: 1;
      height: 100%;
      width: 0.052vw * 1200;
      padding-right: 30px;
      .article-center-content {
        height: 100%;
        padding: 0 0.052vw * 100;
        position: relative;
        .number-left,
        .number-right {
          position: absolute;
          top: 0;
          width: 0.052vw * 100;
          height: 100%;
        }
        .number-left {
          left: 0;
        }
        .number-right {
          right: 0;
        }
        .number-center {
          width: 100%;
          height: 100%;
        }
        .number-box {
          width: 0.052vw * 100;
          height: 0.0925vh * 90;
          background: url("../../assets/img/screen/group6.png") center no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .left-top {
            font-size: 0.0925vh * 34;
            color: #fff;
            font-weight: bold;
            line-height: 0.0925vh * 44;
            span {
              font-size: 0.0925vh * 14;
              font-weight: 400;
              color: #ffffff;
              padding-left: 4px;
            }
          }
          .left-bottom {
            font-size: 14px;
            color: #fff;
            padding-top: 4px;
          }
        }
      }
    }
    .article-right {
      width: 0.052vw * 750;
      height: 100%;
      .article-right-top {
        display: flex;
        height: 50%;
      }
      .train {
        height: 100%;
        background: url("../../assets/img/screen/group1.png") center no-repeat;
        background-size: 100% 100%;
        width: 48%;
        padding: 10px;
      }
      .qualified {
        width: 48%;
        background: url("../../assets/img/screen/group1.png") center no-repeat;
        background-size: 100% 100%;
        margin-left: 4%;
        padding: 10px;
      }
      .unit {
        height: 46%;
        margin-top: 4%;
        background: url("../../assets/img/screen/group4.png") center no-repeat;
        background-size: 100% 100%;
        width: 100%;
        padding: 10px;
      }
    }
  }
  .screen-bottom {
    height: 0.0925vh * 280;
    display: flex;
    padding-top: 0.0925vh * 30;
    .achievement {
      width: 48%;
      height: 100%;
      background: url("../../assets/img/screen/group4.png") center no-repeat;
      background-size: 100% 100%;
      padding: 10px;
    }
    .moment {
      width: 48%;
      margin-left: 4%;
      height: 100%;
      background: url("../../assets/img/screen/group4.png") center no-repeat;
      background-size: 100% 100%;
      padding: 10px;
    }
  }
  .eachart-group {
    height: calc(100% - 24px);
  }
}
</style>
